<template>
    <div>
        <keep-alive>
            <router-view class="container"></router-view>
        </keep-alive>
        <div class="tab-bar">
            <div class="link">
                <div class="l" @click="toFuncPage">
                    <img v-if="index === 0" src="../../assets/images/index/xitonggongneng.png" alt="" />
                    <img v-else src="../../assets/images/index/xitonggongneng-1.png" alt="" />
                    <p :class="{ active: index === 0 }">系统功能</p>
                </div>
                <div class="r" @click="toUserPage">
                    <img v-if="index === 1" src="../../assets/images/index/user.png" alt="" />
                    <img v-else src="../../assets/images/index/user-1.png" alt="" />
                    <p :class="{ active: index === 1 }">个人中心</p>
                </div>
            </div>
            <div class="circle">
                <img src="../../assets/images/index/lianxi.png" alt="" />
                <p>联系</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            index: 0,
        };
    },
    methods: {
        toFuncPage() {
            this.$router.push('/index/func').catch((err) => {});
            this.index = 0;
        },
        toUserPage() {
            this.$router.push('/index/usercenter').catch((err) => {});
            this.index = 1;
        },
    },
    created() {
        if (this.$route.path.indexOf('/index/func') !== -1) {
            this.index = 0;
        } else if (this.$route.path.indexOf('/index/usercenter') !== -1) {
            this.index = 1;
        }
    },
};
</script>

<style lang="less" scoped>
.container {
    position: relative;
    height: calc(100vh - 2.02rem);
    background-color: #f5f5f5;
}
.tab-bar {
    height: 1.3rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    font-size: 0.26rem;
    z-index: 999;
    img {
        width: 0.45rem;
        height: 0.45rem;
    }
    .link {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        .l,
        .r {
            width: 2.93rem;
            color: #999999;
        }
    }
    .link .l,
    .link .r,
    .circle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.27rem;
        img {
            margin-bottom: 6px;
        }
    }
    .circle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -0.55rem;
        background-color: #ffcc33;
        width: 1.64rem;
        height: 1.64rem;
        border-radius: 50%;
        box-sizing: border-box;
        border: 0.12rem solid #efefef;
        color: #fff;
    }
}
.active {
    color: #003399;
}
</style>
